<template>
  <div class="box">
    <div class="top">
      <input
        type="text"
        placeholder="请输入医生姓名/医院名称/科室名称/疾病名称"
        @click="sou"
        class="input"
      />
    </div>
    <div class="middle">
      <div class="middleTop">
        <img src="../../assets/14.webp" alt="" />
        <div class="middleTopTitle">
          <p>描述病情找医生</p>
          <p>智能病情分析，精准推荐医生</p>
        </div>
        <button @click="zDoctor">一键找医生</button>
      </div>
      <div class="middleTop1">
        <div class="middleTopLeft">
          <img src="../../assets/images/权威专家.png" alt="" />
          <div class="middleTopLeftTitle">
            <p>权威专家</p>
            <p>三甲名医 特级专家</p>
          </div>
        </div>
        <div class="middleTopRight">
          <img src="../../assets/images/特惠义诊.png" alt="" />
          <div class="middleTopRightTitle">
            <p>权威专家</p>
            <p>及时折扣 高性价比</p>
          </div>
        </div>
      </div>
      <div class="middleTop2">
        <div class="middle2Top">
          <b>按科室</b>
          <p>更多科室 ></p>
        </div>
        <div class="middle2Bottom">
          <div class="middle2BottomMiddle">
            <span class="card">
              <img src="../../assets/img/皮肤科.png" alt="" />
              <p>皮肤科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/儿科.png" alt="" />
              <p>儿科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/妇科.png" alt="" />
              <p>妇科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/外科.png" alt="" />
              <p>外科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/耳鼻咽喉科.png" alt="" />
              <p>耳鼻咽喉科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/精神科.png" alt="" />
              <p>精神科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/泌尿外科.png" alt="" />
              <p>泌尿外科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/呼吸内科.png" alt="" />
              <p>呼吸内科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/肿瘤科.png" alt="" />
              <p>肿瘤及防..</p>
            </span>
            <span class="card">
              <img src="../../assets/img/整形美容科.png" alt="" />
              <p>整形美容科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/骨伤科.png" alt="" />
              <p>骨伤科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/肛肠科.png" alt="" />
              <p>肛肠科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/报告解读科.png" alt="" />
              <p>报告解读科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/男科.png" alt="" />
              <p>男科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/内科.png" alt="" />
              <p>内科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/产科.png" alt="" />
              <p>产科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/中医科.png" alt="" />
              <p>中医科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/消化内科.png" alt="" />
              <p>消化内科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/精神心理科.png" alt="" />
              <p>心理科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/性病科.png" alt="" />
              <p>性病科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/神经内科-K.png" alt="" />
              <p>神经内科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/心血管内科icon.png" alt="" />
              <p>心血管内科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/口腔颌面科.png" alt="" />
              <p>口腔颌面科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/眼科.png" alt="" />
              <p>眼科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/营养科.png" alt="" />
              <p>营养科</p>
            </span>
            <span class="card">
              <img src="../../assets/img/全部.png" alt="" />
              <p>全部</p>
            </span>
          </div>
        </div>
      </div>
      <div class="middleTop3">
        <div class="middle2Top1">
          <b>按疾病</b>
          <p>更多疾病 ></p>
        </div>
        <div class="middle3Top1">
          <p>
            <span>不孕不育</span>
            <span>宫颈癌</span>
            <span>阴道炎</span>
            <span>原发性痛经</span>
          </p>
          <p>
            <span>多囊卵巢综合征</span>
            <span>子宫肌瘤</span>
            <span>妇科炎症</span>
            <span>早孕</span>
          </p>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottoms">
        <van-tabs class="bottom1">
          <van-tab v-for="(item, index) in actives" :title="item" :key="index"></van-tab>
        </van-tabs>
        <div class="bottomRight">
          <img src="../../assets/images/更多.png" alt="" @click="shai" />
        </div>
      </div>
      <div class="bottom2">
        <div class="bottom2Top">
          <div v-for="(item, index) in doctors" :key="index" class="bottom2Top">
            <div class="top-head-text" @click="Exdetalis(item)">
              <div class="top-head-zhi">
                <img src="../../assets/img/知名.png" alt="" />
                知名专家
              </div>
              <div class="head-text-tou">
                <img :src="item.doctor_info.image" alt="" />
                <p class="head-text-tou-pa">
                  <span class="head-text-tou-pa-name">{{ item.doctor_info.name }}</span>
                  |
                  <span>{{ item.doctor_info.title }}</span>
                  <span>{{ item.doctor_info.clinic_name }}</span>
                  <span class="head-text-tou-pa-ke">{{ item.doctor_info.new_tags[1].name }}</span>
                </p>
                <p clang="head-text-tou-pb">
                  <span>{{ item.doctor_info.hospital_name }}</span>
                  <span class="head-text-tou-pb-san">三甲</span>
                  <span class="head-text-tou-pb-bai">{{ item.doctor_info.new_tags[0].name }}</span>
                </p>
              </div>
              <div class="head-text-text">
                <p>
                  {{ p }}
                </p>
              </div>
              <div class="head-text-shu">
                <span>
                  {{ item.doctor_info.good_rate }}
                  <van-icon name="star" color="#fdb206" />
                </span>
                <span>
                  {{ item.doctor_info.service_data_list[1].name }} {{ item.doctor_info.reply_num }}
                </span>
                <span>
                  {{ item.doctor_info.service_data_list[2].name }}
                  {{ item.doctor_info.service_data_list[2].descrip }}
                </span>
              </div>
              <div class="head-text-an">
                <div v-for="(v, i) in item.doctor_info.service_list" :key="i">
                  <span>{{ v.service_type_verbose }}￥{{ v.price }}</span>
                </div>
                <!-- <div class="head-text-an-right">{{ item.doctor_info.ad_tag }}</div> -->
              </div>
              <div class="head-text-yixue">
                <p>医学博士，上海市康复医学会泌尿盆底专业委员会委员</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import {getSelectDocter } from '../../request/http'
import axios from 'axios'

// 所有的类型
const actives = ref([
  '全部',
  '内科',
  '外科',
  '妇产科',
  '儿科',
  '皮肤性病科',
  '五官科',
  '肿瘤科',
  '中医科',
  '传染科',
  '其他'
])
const router = useRouter()
const sou = () => {
  router.push('/search')
}
//一键找医生
const zDoctor = () => {
  router.push('/msgNotify')
}
const p = ref()
const doctors = ref([])
const getDoctor = () => {
 getSelectDocter().then((res) => {
    // console.log(res.data.doctors);
    // console.log(res.data.doctors[0].doctor_info.good_at);
    p.value = res.data.doctors[0].doctor_info.good_at.split('>')[1].split('<')[0]
    doctors.value = res.data.doctors
  })
}
getDoctor()

// 搜索+筛选
const shai = () => {
  router.push('/toSearch')
}

// 点击医生详细
const Exdetalis = (item: any) => {
  router.push({
    path: `/Exdetalis`,
    //把获取的渲染数据从 对象或值转换为 字符串然后存储在item变量中
    query: { item: JSON.stringify(item) }
  })
}
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  font-size: 13px;
}
.box {
  width: 100%;
  height: 100%;
  background: #eee;
}
.input {
  width: 100%;
  height: 40px;
  padding-left: 10px;
  border-radius: 20px;
  border: none;
  border: #ccc 1px solid;
}
.top {
  width: 100%;
  height: 50px;
  padding: 5px;
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.middle {
  width: 100%;
  height: 60%;
  margin-top: 55px;
  padding-top: 3px;
}
.middleTop {
  width: 96%;
  height: 60px;
  background: white;
  margin: 2%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
}
.middleTop img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.middleTopTitle p {
  font-size: 13px;
}
.middleTop button {
  width: 80px;
  height: 30px;
  border-radius: 30px;
  font-size: 13px;
  border: none;
  border: #29dd2c 1px solid;
  color: #29dd2c;
  background: white;
}

.middleTop1 {
  width: 96%;
  height: 60px;
  margin: 2%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-radius: 10px;
}
.middleTopLeft {
  width: 49%;
  height: 60px;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
  margin-right: 2%;
}
.middleTopRight {
  width: 49%;
  height: 60px;
  background: white;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
}

.middleTopLeft img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.middleTopRight img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.middleTopLeftTitle p {
  font-size: 13px;
}
.middleTopRightTitle p {
  font-size: 13px;
}
.middleTop2 {
  width: 96%;
  height: 190px;
  background: white;
  margin: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
}
.middle2Top {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.middle2Top b {
  width: 100px;
  font-size: 20px;
  float: left;
  margin-left: 10px;
}
.middle2Top p {
  font-size: 15px;
  color: #ccc;
  float: right;
  margin-left: 170px;
}
.middle2Bottom {
  /* width: 100%; */
  width: 360px;
  height: 150px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 5px;
}
.middle2BottomMiddle {
  width: 1300px;
  height: 150px;
  background: white;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  overflow-x: auto;
}
.card {
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.card img {
  width: 25px;
  height: 25px;
  margin: 0 auto;
}
.card p {
  width: 100%;
  height: 25px;
  font-size: 15px;
  line-height: 25px;
}
.middleTop3 {
  width: 96%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  margin: 2%;
  border-radius: 10px;
}
.middle2Top1 {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}
.middle2Top1 b {
  width: 100px;
  font-size: 20px;
  float: left;
  margin-left: 10px;
}
.middle2Top1 p {
  font-size: 15px;
  color: #ccc;
  float: right;
  margin-left: 170px;
}
.middle3Top1 {
  width: 360px;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.middle3Top1 p {
  width: 100%;
  height: 50%;
}
.middle3Top1 span {
  padding: 5px;
  color: #29dd2ce2;
  height: 35px;
  border: #29dd2ce2 1px solid;
  font-size: 15px;
  margin: 5px;
}
.bottom {
  width: 100%;
  height: 30%;
  border-radius: 10px;
  padding: 10px;
}
.bottom1 {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  padding-left: 1.1%;
  padding-top: 0.5%;
}
.bottom .bottomRight {
  width: 45px;
  height: 45px;
  border-left: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.bottomRight img {
  width: 25px;
  height: 25px;
}
.bottoms {
  width: 100%;
  height: 45px;
  background: white;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.bottom2 {
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  // background: white;
  .top-head-text {
    position: relative;
    height: 100%;
    width: 100%;
    background: #fff;
    padding: 20px 10px;
    // border-bottom: 1px solid #000;
    margin-bottom: 10px;
    box-shadow: inset 0px 9px 5px #fff7ed;

    .top-head-zhi {
      position: absolute;
      height: 20px;
      width: 80px;
      background: #ffe7c3;
      right: 0;
      top: 0;
      border-bottom-left-radius: 15px;
      color: #884d18;
      text-align: center;
      line-height: 20px;
      font-weight: bold;
      img {
        float: left;
        height: 8px;
        width: 10px;
        margin-left: 8px;
        margin-top: 5px;
      }
    }

    .head-text-tou {
      height: 50px;
      width: 100%;
      // background: red;
      font-size: 12px;
      img {
        height: 50px;
        width: 50px;
        float: left;
        border-radius: 50px;
      }
      p {
        line-height: 25px;
        span {
          padding-right: 5px;
        }
      }
      .head-text-tou-pa-name {
        font-weight: bold;
        font-size: 15px;
        display: inline-block;
      }
      .head-text-tou-pa-ke {
        height: 30px;
        width: 60px;
        background: #f2f8fd;
        color: #a3caf1;
      }
      .head-text-tou-pb-san {
        height: 30px;
        width: 60px;
        background: #1cc381;
        color: white;
        margin: 0 5px;
      }
      .head-text-tou-pb-bai {
        color: #f7e9d2;
        background-color: #884d18;
      }
    }
    .head-text-text {
      height: 50px;
      width: 100%;
      // background: orange;
      margin-top: 5px;
      overflow: auto;
      p {
        font-size: 12px;
        line-height: 20px;
        white-space: nowrap; /* 文本不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 用省略号显示超出部分 */
      }
    }
    .head-text-shu {
      height: 20px;
      width: 100%;
      span {
        float: left;
        line-height: 20px;
        padding-right: 25px;
      }
    }
    .head-text-an {
      height: 50px;
      width: 100%;
      // border-bottom: 1px solid #000;
      padding-top: 10px;
      span {
        float: left;
        height: 30px;
        width: 70px;
        border: 1px solid #39d167;
        color: #39d167;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
        font-size: 12px;
        font-weight: bold;
        margin-right: 10px;
      }
      .head-text-an-right {
        float: right;
        height: 20px;
        width: 70px;
        font-size: 10px;
        border: 1px solid #ff7751;
        color: #ff7751;
        border-radius: none;
        text-align: center;
        line-height: 20px;
        margin-top: 8px;
        font-weight: bold;
      }
    }

    .head-text-yixue {
      height: 20px;
      width: 100%;
      background: #f9f9f9;
      line-height: 20px;
    }
  }
}
</style>
